<template>
	<!-- 统计及监控模块-工作情况汇总（年统计）页面 -->
	<div class="fillcontain">
		<el-form label-width="100px" class="search_container">
			<el-row>
			<el-col :span="5">
				<el-form-item label="业务部门" prop="customerNo">
					<el-select v-model="searchParams.orgid" placeholder="">
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="选择日期" prop="telephone">
					<el-date-picker  v-model="searchParams.time" type="year" value-format="yyyy" format="yyyy"
						placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="渠道选择" prop="customerName">
					<el-select v-model="searchParams.channel" placeholder="">
						<el-option v-for="item in channels" :key="item.key" :label="item.name" :value="item.key">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="5">
				<el-form-item label="险种类型" prop="idNo">
					<el-select v-model="searchParams.risk" placeholder="">
						<el-option v-for="item in insmain" :key="item.value" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="4" style="padding-left: 40px;float: right;">
				<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
				<el-button type="primary" plain icon="el-icon-refresh" @click="research"></el-button>
			</el-col>
			</el-row>
		</el-form>
		<div class="contain">
			<!-- 操作按钮 -->
			<el-row class="bgfff pb20"  v-if="false">
				<el-col :span="24">
					<el-button @click="addDialogVisible = true" type="danger" plain>导出</el-button>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="8" class="pr15">
					<div class="statis_box prescription">
						<h5 class="statis_tit">时效达成率</h5>
						<el-row>
							<el-col :span="8" class="">
								<div id="my-chart-Pie-prescription"></div>
							</el-col>
							<el-col :span="16" class="text_center">
								<div class='statis_prescription_name pt10'>
									<el-row>
										<el-col :span="10" class="text_right"><span class="textColorGreyA">达成差异率:</span></el-col>
										<el-col :span="12" class="text_left"><span  id="reachRate">0.0%</span></el-col>
									
										<el-col :span="10" class="text_right"><span class="textColorGreyA">达成率:</span></el-col>
										<el-col :span="7" class="text_left"><span class="textColorGreyB" id="dayachRate">83.97%</span></el-col>
										<el-col :span="7" class="text_left"> <span  ></span></el-col>
									
									
										<el-col :span="10" class="text_right"><span class="textColorGreyA">当年受理任务数:</span></el-col>
										<el-col :span="5" class="text_left"><span class="textColorGreyB"  id="dayAllCount"></span></el-col>
										<el-col :span="9" class="text_left"> <span  id="dayAllgrowth"></span></el-col>
									
										<el-col :span="10" class="text_right"><span class="textColorGreyA">当年完成任务数:</span></el-col>
										<el-col :span="5" class="text_left"><span class="textColorGreyB"  id="dayEndCount"></span></el-col>
										<el-col :span="9" class="text_left"> <span  id="dayEndgrowth"></span></el-col>
									</el-row>
								</div>
							</el-col>
						</el-row>
						<!-- 日期 控件-->
						<el-row>
							<el-col :span="24">
								<el-col :span="10">
									<p class="pText pGreen">
										<el-col :span="6">&nbsp;</el-col>
										<el-col :span="2"><span class="dot">&nbsp;</span></el-col>
										<el-col :span="16"><span class="">达标</span></el-col>
									</p>
								</el-col>
								
								<el-col :span="10">
									<p class="pText pRed">
										<el-col :span="6">&nbsp;</el-col>
										<el-col :span="2"><span class="dot">&nbsp;</span></el-col>
										<el-col :span="16"><span class="">未达标</span></el-col>
									</p>
								</el-col>
							</el-col>
						</el-row>
						<!-- 年份 -->
						<el-row class="year_box">
							<el-col :span="6" class="text_center">
								<i class="el-icon-arrow-left" @click="prevYear"></i>
							</el-col>
							<el-col :span="12" class="text_center">
								<span class="year">{{year}}年</span>
							</el-col>
							<el-col :span="6" class="text_center">
								<i class="el-icon-arrow-right" @click="nextYear"></i>
							</el-col>
						</el-row>
						<!-- 月份 -->
						<el-row class="month_box">
<!-- 							<p>{{dateMap}}</p> -->
							<div v-for="item in months" :key="item">
								<div v-if="dateMap[item]!=undefined">
									<div v-if="dateMap[item] =='Y'">
										<el-col :span="6" class="monthBoder">
											<p class="text_center"><span class="monthName">{{item}}</span><span class="monthFont">月</span></p>
											<p class="pGreen">
												<el-col :span="24" class="text_center"><span class="dot">&nbsp;</span></el-col>
											</p>
										</el-col>
									</div>
									<div v-else>
										<el-col :span="6" class="monthBoder">
											<p class="text_center"><span class="monthName">{{item}}</span><span class="monthFont">月</span></p>
											<p class="pRed">
												<el-col :span="24" class="text_center"><span class="dot">&nbsp;</span></el-col>
											</p>
										</el-col>
									</div>
								</div>
								<div v-else>
									<el-col :span="6" class="monthBoder">
										<p class="text_center"><span class="monthName">{{item}}</span><span class="monthFont">月</span></p>
										<p class="pRed">
											<el-col :span="24" class="text_center"><span class="dot">&nbsp;</span></el-col>
										</p>
									</el-col>
								</div>
							</div>
							

						</el-row>
					</div>
				</el-col>
				<el-col :span="16">
					<el-col :span="24">
						<div class="statis_box number">
							<h5 class="statis_tit">人工核保处理件数</h5>
							<!-- <p class="text_right subtext"><i class="el-icon-s-marketing"></i>实际完成件数</p> -->
							<div id="my-chart-Bar-number"></div>
						</div>
					</el-col>
					<el-col :span="24" class="mt15">
						<div class="statis_box comparison">
							<h5 class="statis_tit">人工工作量情况比对</h5>
							<p class="text_right subtext"><span style="color:#ffff3c ;">— </span>人均工作量 <i style="color:#7bc7c8 ;" class="el-icon-s-data"></i> 实际工作量</p>
							<div id="my-chart-Bar-comparison"></div>
						</div>
					</el-col>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		queryCommon
	} from '@/api/statis/newWork/newWork';
	import moment from 'moment';
	import TaskConstants, {
		call
	} from '@/api/taskManager/common'
	import constant from '@/utils/constant'
	export default {
		data() {
			return {
				year: 2020,
				addDialogVisible: false,
				routeid: '',
				months:['01','02','03','04','05','06','07','08','09','10','11','12'],
				searchParams: {
					channel: '',
					risk: '',
					time: '',
					orgid: ''
				},
				emptySearchParams:{},
				dateMap:{},
				insmain:TaskConstants.insmain,
				channels:TaskConstants.preChannelType,
			}
		},
		activated(){
		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.search();
		        }
		    };
		}, 
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
		},
		mounted() {
			this.init(new Date());
			this.queryC();
		},
		methods: {
			init(date) {
				this.year = moment(date).format("YYYY");
				this.reachDistrbution();
			},
			prevYear() {
				this.year = moment(this.year).subtract(1,'years')
				this.init(this.year);
			},
			nextYear() {
				this.year = moment(this.year).add(1,'years')
				this.init(this.year);
			},
			search() {
				this.queryC();
			},
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},
			research() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
			},
			queryC() {
				let param = {
					'routeid': 'hebao',
					'time': this.searchParams.time,
					'type': 'year',
					'channel':this.searchParams.channel,
					'risk':this.searchParams.risk
				};
				let vueObj = this;
				queryCommon(vueObj, param, "月");
			},
			reachDistrbution() {
				this.show()
				let param = {
					'time': this.year,
					'type': 'year',
				};
				call(TaskConstants.apis["reachDistrbution"], param, "post").then(result => {
					if (result.resultCode == constant.SUCCESS && result.data) {
						let data = result.data;
						let dat={};
						for (let key in data) {
							let k = key.substring(5,7);
							dat[k] = data[key];
						}
						this.dateMap = dat;
					}
					this.year = this.year;
					this.cancle();
				}).catch(err => {
					this.cancle();
				})
			}
		},
		computed: {
			...mapGetters(['tags']),
		},
	}
</script>

<style lang="less" scoped>
	.contain {
		background: #fff;
		padding: 30px 10px 20px 10px;
	.statis_box {
		box-shadow: 0 0 10px #e1e1e1;
		border: 1px solid #e1e1e1;
	
		.statis_tit {
			padding: 10px 20px;
			color: #666;
		}
	
		.el-icon-s-marketing {
			color: #f76767;
			padding-right: 10px;
	
		}
	}
	
	.statis_prescription_name {
		span {
			padding: 5px 2px 5px 2px;
			display: block;
		}
	
		span.textColorGreyA {
			color: #999;
		}
	
		span.textColorGreyB {
			color: #666;
		}
	
		span.textColorRed {
			color: #f76767;
		}
	
		span.textColorGreen {
			color: #92CEAB;
		}
	}
	
	.pText {
		color: #666666;
	}
	
	.pGreen {
		.dot {
			background-color: #92CEAB;
			border: 1px solid #92CEAB;
		}
	}
	
	.pYello {
		.dot {
			background-color: #F9B248;
			border: 1px solid #F9B248;
		}
	}
	
	.pOrange {
		.dot {
			background-color: #FF8638;
			border: 1px solid #FF8638;
		}
	}
	
	.pRed {
		.dot {
			background-color: #f76767;
			border: 1px solid #f76767;
		}
	}
	
	.dot {
		display: block;
		border-radius: 50%;
		text-align: center;
		width: 4px;
		height: 4px;
		margin: 6px auto 0 auto;
	}
	
	.number p.subtext {
		padding: 0 20px;
		color: #666;
	}
	
	#my-chart-Pie-prescription {
		width: 140px;
		padding-bottom: 20px;
		min-height: 140px;
	}
	
	#my-chart-Bar-number {
		width: 850px;
		padding-bottom: 20px;
		min-height: 280px;
	}
	
	#my-chart-Bar-comparison {
		width: 850px;
		padding-bottom: 20px;
		min-height: 280px;
	}
	
	// 日期控件
	// 年份
	.year_box {
		background-color: #F7F9FA;
		border: 1px solid #EBEFF0;
		padding: 5px 0;
		margin: 10px 20px 0px 20px;
	
		.year {
			color: #333;
			font-size: 1rem;
		}
	
		.el-icon-arrow-left,
		.el-icon-arrow-right {
			color: #ccc !important;
			cursor: pointer;
			font-size: 24px;
		}
	}
	
	// 月份
	.month_box {
		margin: 0 20px 20px 20px;
		border-left: 1px solid #e1e1e1;
	
		.monthBoder {
			border-right: 1px solid #e1e1e1;
			border-bottom: 1px solid #e1e1e1;
			padding: 20px 0;
		}
	
		.monthName {
			font-size: 1.125rem;
			color: #333;
		}
	
		.monthFont {
			font-size: 14px;
			color: #666;
		}
	}
	}
	.fillcontain {
		padding-bottom: 0;
	}
	.search_container {
		padding: 20px 20px 0 20px;
		//    border-top: 1px solid #e1e1e1;
	}
</style>
